<template>
  <content100>
    <el-row :gutter="20">
      <el-col :span="7">
        <card100 class="root-card-h">
          <div slot="header" class="card-header">
            <span>角色</span>
            <div>
              <create-role :fn-create="fnCreateRole" @onCreate="handleRoleAdd" />
            </div>
          </div>
          <role-list
            ref="roles"
            :roles="roles"
            :fn-edit="fnEditRole"
            :fn-delete="fnDeleteRole"
            @onChange="hanldeRoleChanged"
          />
        </card100>
      </el-col>
      <el-col :span="7">
        <el-card class="root-card-h">
          <div slot="header">拥有权限</div>
          <pages
            ref="pages"
            :role-id="currentRole['id']"
            :component-map="componentMap"
            :fn-add="fnAddPages"
            :fn-remove="fnRemovePages"
            @restorePages="handlePagesRestore"
          />
        </el-card>
      </el-col>
      <el-col :span="10">
        <el-card class="root-card-h">
          <div slot="header">功能树</div>
          <menu-tree
            ref="menu"
            :tree-data="tree"
            :fn-mapper="fnMapper"
            :component-map="componentMap"
            @change="handleSelectChange"
          />
        </el-card>
      </el-col>
    </el-row>
  </content100>
</template>

<script>
import RoleList from './RoleList'
import CreateRole from './CreateRole'
import MenuTree from './MenuTree'
import Pages from './Pages'

import {
  getRoleManagerInfo,
  createRole,
  editRole,
  removeRole,
  roleAddPages,
  roleRemovePages,
  rolesPage
} from '@/svc/role'

export default {
  name: 'RoleManager',
  components: { RoleList, CreateRole, MenuTree, Pages },
  data() {
    return {
      roles: [],
      tree: [],
      selected: [],
      componentMap: {},
      currentRole: { id: '' },
      fnMapper: null,
      fnCreateRole: createRole.fn,
      fnEditRole: editRole.fn,
      fnDeleteRole: removeRole.fn,
      fnAddPages: roleAddPages.fn,
      fnRemovePages: roleRemovePages.fn
    }
  },
  mounted() {
    getRoleManagerInfo.fn(this).then(res => {
      const tree = res['account.GetMenuTree']
      if (!this.$rjok(tree)) {
        return
      }
      this.tree = tree['data']
      if (!this.tree) {
        this.tree = []
      }
      this.generateMenuMap(this.tree)

      if (!this.$rjok(res)) {
        return
      }
      const roles = res['account.ListRoles']
      if (!this.$rjok(roles)) {
        return
      }
      this.roles = roles['data']
      if (!this.roles) {
        this.roles = []
      }

      const pages = res['account.GetRolesPage']
      if (!this.$rjok(pages)) {
        return
      }
      this.pages = pages['data']
      if (!this.pages) {
        this.pages = []
      }
      this.$refs.pages.setSelect(this.pages)
      this.$refs.menu.setSelect(this.pages, this.componentMap)
    })
  },
  methods: {
    handleRoleAdd(role) {
      this.roles.splice(0, 0, role)
      this.$refs.roles.setCurrent(role)
    },
    hanldeRoleChanged(role) {
      this.currentRole = role
      rolesPage.fn(this, { roleId: role['id'] }).then(res => {
        if (!res) {
          res = []
        }
        // console.log('componentMap', this.componentMap)
        this.$refs.pages.setSelect(res)
        this.$refs.menu.setSelect(res, this.componentMap)
      }).catch(err => {
        console.log('rolesPage', err)
      })
    },
    handleSelectChange(selected) {
      this.$refs.pages.updateSelect(selected)
    },
    handlePagesRestore(pages) {
      this.pages = pages
      this.$refs.menu.setSelect(this.pages, this.componentMap)
    },
    generateMenuMap(tree) {
      const map = {}
      const fn = (list) => {
        if (list) {
          list.forEach(item => {
            fn(item['children'])
            if (item['component'] !== 'Layout') {
              map[item['component']] = item
            }
          })
        }
      }
      fn(tree)
      this.componentMap = map
    }
  }
}

export const PageInfo = {
  title: '角色管理',
  icon: 'role',
  props: {
    admin: true // admin 账号必有功能
  },
  apis: [
    ...getRoleManagerInfo.apis,
    ...createRole.apis,
    ...editRole.apis,
    ...removeRole.apis,
    ...roleAddPages.apis,
    ...roleRemovePages.apis,
    ...rolesPage.apis
  ]
}
</script>
